<template>
    <!-- 图表 -->
    <div class="mychar-content">
        <div ref="refString" class="mychar"></div>
    </div>
</template>

<script setup>
import { defineProps, onMounted, toRefs, ref } from "vue";
import * as echarts from 'echarts';
const props = defineProps({
    echartsData: Object,
    echartsName: String
})
const { echartsData, echartsName } = toRefs(props)
const refString = ref('echarts')
const handlerEcharts = () => {
    
    // if (echartsData.value.length > 0) return
    const machart = echarts.init(refString.value);
    // 设置配置项
    const option = {
        title: {
            text: echartsName.value
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: echartsData.value?.legend?.data
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {
                    name: echartsName.value,
                }
            }
        },
        xAxis:echartsData.value.xaxis,
        yAxis: echartsData.value.yaxis,
        series: echartsData.value.series
    };
    machart.setOption(option);
    //动态获取窗口尺寸以便重置图表尺寸，用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    window.addEventListener('resize', () => {
        if (machart) {
            machart.resize()
        }
    })
};
watch(echartsData, () => {
    handlerEcharts()
}, { deep: true })
onMounted(() => {
    handlerEcharts()
})
</script>

<style lang="scss" scoped>
.mychar-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .mychar {
        width: 70vw;
        height: 70vh;
        // width: 500px;
        // height: 500px;
    }
}
</style>
